Performance Timeline: Una guía completa para la recolección de métricas

En el vertiginoso mundo digital de hoy, el rendimiento de un sitio web es primordial. Los usuarios esperan que los sitios web se carguen rápidamente y respondan al instante. Un sitio web lento puede provocar frustración, sesiones abandonadas y, en última instancia, pérdida de ingresos. Afortunadamente, los navegadores web modernos ofrecen herramientas potentes para medir y analizar el rendimiento de los sitios web. Una de las herramientas más valiosas es la API Performance Timeline.

Esta guía completa explorará la API Performance Timeline en detalle, abarcando desde sus conceptos fundamentales hasta técnicas avanzadas para recopilar y analizar métricas de rendimiento. Profundizaremos en los distintos tipos de entradas de rendimiento, demostraremos cómo usar la API de manera efectiva y proporcionaremos ejemplos prácticos para ayudarlo a optimizar el rendimiento de su sitio web.

¿Qué es la API Performance Timeline?

La API Performance Timeline es un conjunto de interfaces de JavaScript que proporcionan acceso a datos relacionados con el rendimiento recopilados por el navegador. Permite a los desarrolladores medir diversos aspectos del rendimiento de un sitio web, tales como:

• Tiempo de carga de la página
• Tiempo de carga de recursos (imágenes, scripts, hojas de estilo)
• Mediciones de tiempo de usuario
• Tasa de fotogramas y rendimiento del renderizado
• Uso de memoria

Al recopilar y analizar estos datos, los desarrolladores pueden identificar cuellos de botella de rendimiento e implementar optimizaciones para mejorar la experiencia del usuario. La API proporciona una forma estandarizada de acceder a los datos de rendimiento, lo que facilita la creación de herramientas de monitoreo de rendimiento compatibles con múltiples navegadores.

Conceptos e interfaces clave

La API Performance Timeline gira en torno a algunos conceptos e interfaces clave:

• Performance Timeline: Representa la línea de tiempo de los eventos de rendimiento que han ocurrido durante el ciclo de vida de una página web. Es el punto central para acceder a los datos de rendimiento.
• Performance Entry: Representa un único evento de rendimiento, como un evento de carga de recursos o una medición de tiempo definida por el usuario.
• Performance Observer: Permite a los desarrolladores monitorear la Performance Timeline en busca de nuevas entradas de rendimiento y responder a ellas en tiempo real.
• Objeto `performance`: El objeto global (`window.performance`) que proporciona acceso a la Performance Timeline y a los métodos relacionados.

El objeto `performance`

El objeto `performance` es el punto de partida para interactuar con la API Performance Timeline. Proporciona métodos para recuperar entradas de rendimiento, limpiar la línea de tiempo y crear observadores de rendimiento. Algunos de los métodos más utilizados incluyen:

• `performance.getEntries()`: Devuelve un array de todas las entradas de rendimiento en la línea de tiempo.
• `performance.getEntriesByName(name, entryType)`: Devuelve un array de entradas de rendimiento con un nombre y tipo de entrada específicos.
• `performance.getEntriesByType(entryType)`: Devuelve un array de entradas de rendimiento de un tipo específico.
• `performance.clearMarks(markName)`: Limpia las marcas de rendimiento con un nombre específico.
• `performance.clearMeasures(measureName)`: Limpia las medidas de rendimiento con un nombre específico.
• `performance.now()`: Devuelve una marca de tiempo de alta resolución, generalmente en milisegundos, que representa el tiempo transcurrido desde el inicio de la navegación. Esto es crucial para medir duraciones.

Tipos de entradas de rendimiento (Performance Entry Types)

La API Performance Timeline define varios tipos diferentes de entradas de rendimiento, cada uno representando un tipo específico de evento de rendimiento. Algunos de los tipos de entrada más importantes incluyen:

• `navigation`: Representa los tiempos de navegación para la carga de una página, incluyendo la búsqueda de DNS, la conexión TCP, la solicitud y los tiempos de respuesta.
• `resource`: Representa la carga de un recurso específico, como una imagen, script u hoja de estilo.
• `mark`: Representa una marca de tiempo definida por el usuario en la línea de tiempo.
• `measure`: Representa una duración definida por el usuario en la línea de tiempo, calculada entre dos marcas.
• `paint`: Representa el tiempo que tarda el navegador en pintar el primer contenido en la pantalla (First Paint) y el primer contenido significativo (First Contentful Paint).
• `longtask`: Representa tareas que bloquean el hilo principal durante un período prolongado (generalmente más de 50 ms), lo que puede causar saltos en la interfaz de usuario (UI jank).
• `event`: Representa un evento del navegador, como un clic del ratón o la pulsación de una tecla.
• `layout-shift`: Representa cambios inesperados en el diseño de la página que pueden interrumpir la experiencia del usuario (Cumulative Layout Shift).
• `largest-contentful-paint`: Representa el tiempo que tarda el elemento de contenido más grande en el viewport en volverse visible.

Recopilación de métricas de rendimiento

Existen varias formas de recopilar métricas de rendimiento utilizando la API Performance Timeline. Los enfoques más comunes incluyen:

• Recuperar entradas directamente de la línea de tiempo: Usar `performance.getEntries()`, `performance.getEntriesByName()` o `performance.getEntriesByType()` para obtener entradas de rendimiento específicas.
• Usar un Performance Observer: Monitorear la línea de tiempo en busca de nuevas entradas y responder a ellas en tiempo real.

Recuperar entradas directamente

La forma más sencilla de recopilar métricas de rendimiento es recuperar las entradas directamente de la línea de tiempo. Esto es útil para recopilar datos después de que haya ocurrido un evento específico, como después de que la página se haya cargado o después de que un usuario haya interactuado con un elemento específico.

Aquí hay un ejemplo de cómo recuperar todas las entradas de recursos de la línea de tiempo:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Este código recupera todas las entradas de tipo "resource" y registra el nombre y la duración de cada recurso en la consola.

Uso de un Performance Observer

Un Performance Observer le permite monitorear la Performance Timeline en busca de nuevas entradas de rendimiento y responder a ellas en tiempo real. Esto es particularmente útil para recopilar datos a medida que están disponibles, sin tener que sondear la línea de tiempo repetidamente.

Aquí hay un ejemplo de cómo usar un Performance Observer para monitorear nuevas entradas de recursos:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Este código crea un Performance Observer que escucha nuevas entradas de tipo "resource". Cuando se agrega una nueva entrada de recurso a la línea de tiempo, se ejecuta la función de devolución de llamada del observador, registrando el nombre y la duración del recurso en la consola. El método `observer.observe()` especifica qué tipos de entrada debe monitorear el observador.

Medición del tiempo de usuario (User Timing)

La API Performance Timeline también le permite definir sus propias métricas de rendimiento personalizadas utilizando los tipos de entrada `mark` y `measure`. Esto es útil para medir el tiempo que tardan en ejecutarse partes específicas de su aplicación, como renderizar un componente o procesar la entrada del usuario.

Para medir el tiempo de usuario, primero se crea una `mark` para marcar el inicio y el final de la sección que se desea medir. Luego, se crea una `measure` para calcular la duración entre las dos marcas.

Aquí hay un ejemplo de cómo medir el tiempo que tarda en renderizarse un componente:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Este código crea dos marcas, `component-render-start` y `component-render-end`, antes y después del código que renderiza el componente. Luego, crea una medida llamada `component-render-time` para calcular la duración entre las dos marcas. Finalmente, recupera la entrada de la medida de la línea de tiempo y registra la duración en la consola.

Análisis de métricas de rendimiento

Una vez que ha recopilado las métricas de rendimiento, necesita analizarlas para identificar cuellos de botella de rendimiento e implementar optimizaciones. Hay varias herramientas y técnicas que puede utilizar para este propósito:

• Herramientas para desarrolladores del navegador: La mayoría de los navegadores web modernos proporcionan herramientas para desarrolladores integradas que le permiten visualizar y analizar datos de rendimiento. Estas herramientas suelen incluir un panel de Rendimiento (Performance) que muestra una línea de tiempo de los eventos de rendimiento, así como herramientas para perfilar el código JavaScript y analizar el uso de la memoria.
• Herramientas de monitoreo de rendimiento: Existen muchas herramientas de monitoreo de rendimiento de terceros que pueden ayudarle a recopilar, analizar y visualizar datos de rendimiento. Estas herramientas a menudo proporcionan funciones avanzadas como monitoreo en tiempo real, detección de anomalías e informes automatizados. Algunos ejemplos son New Relic, Datadog y Sentry.
• Web Vitals: La iniciativa Web Vitals de Google proporciona un conjunto de métricas que se consideran esenciales para medir la experiencia del usuario. Estas métricas incluyen Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS). Monitorear estas métricas puede ayudarle a identificar y solucionar problemas comunes de rendimiento.

Uso de las herramientas para desarrolladores del navegador

Las herramientas para desarrolladores del navegador son un recurso potente y de fácil acceso para analizar el rendimiento. A continuación, se explica cómo puede usar el panel de Rendimiento en las Herramientas para desarrolladores de Chrome (otros navegadores tienen funcionalidades similares):

1. Abrir las herramientas para desarrolladores: Haga clic derecho en la página web y seleccione "Inspeccionar" o presione F12.
2. Navegar al panel de Rendimiento: Haga clic en la pestaña "Performance".
3. Iniciar la grabación: Haga clic en el botón de grabar (generalmente un círculo) para comenzar a capturar datos de rendimiento.
4. Interactuar con la página: Realice las acciones que desea analizar, como cargar la página, hacer clic en botones o desplazarse.
5. Detener la grabación: Haga clic en el botón de detener para finalizar la grabación.
6. Analizar la línea de tiempo: El panel de Rendimiento mostrará una línea de tiempo de los eventos de rendimiento, incluidos los tiempos de carga, la ejecución de JavaScript, el renderizado y el pintado.

La línea de tiempo proporciona información detallada sobre cada evento, incluida su duración, hora de inicio y relación con otros eventos. Puede acercar y alejar, filtrar eventos por tipo e inspeccionar eventos individuales para obtener más información. Las pestañas "Bottom-Up", "Call Tree" y "Event Log" ofrecen diferentes perspectivas sobre los datos, lo que le permite identificar cuellos de botella de rendimiento y optimizar su código.

Web Vitals: Midiendo la experiencia del usuario

Las Web Vitals son un conjunto de métricas definidas por Google para medir la experiencia del usuario en un sitio web. Centrarse en estas métricas puede mejorar significativamente la satisfacción del usuario y el ranking SEO.

• Largest Contentful Paint (LCP): Mide el tiempo que tarda el elemento de contenido más grande en el viewport en volverse visible. Una buena puntuación de LCP es de 2.5 segundos o menos.
• First Input Delay (FID): Mide el tiempo que tarda el navegador en responder a la primera interacción del usuario (p. ej., hacer clic en un botón o tocar un enlace). Una buena puntuación de FID es de 100 milisegundos o menos.
• Cumulative Layout Shift (CLS): Mide la cantidad de cambios de diseño inesperados que ocurren en la página. Una buena puntuación de CLS es de 0.1 o menos.

Puede medir las Web Vitals utilizando varias herramientas, entre ellas:

• Informe de experiencia de usuario de Chrome (CrUX): Proporciona datos de rendimiento del mundo real para sitios web basados en datos de usuarios anónimos de Chrome.
• Lighthouse: Una herramienta automatizada que audita el rendimiento, la accesibilidad y el SEO de las páginas web.
• Extensión Web Vitals: Una extensión de Chrome que muestra las métricas de Web Vitals en tiempo real mientras navega por la web.
• API PerformanceObserver: Capture directamente los datos de las Web Vitals desde el navegador a medida que ocurren los eventos.

Ejemplos prácticos y casos de uso

Aquí hay algunos ejemplos prácticos y casos de uso de cómo puede utilizar la API Performance Timeline para optimizar el rendimiento de su sitio web:

• Identificar recursos de carga lenta: Use el tipo de entrada `resource` para identificar imágenes, scripts y hojas de estilo que tardan mucho en cargarse. Optimice estos recursos comprimiéndolos, usando una Red de Distribución de Contenidos (CDN) o cargándolos de forma diferida (lazy-loading). Por ejemplo, muchas plataformas de comercio electrónico como Shopify, Magento o WooCommerce dependen de las imágenes para vender productos. Optimizar la carga de imágenes utilizando los datos de la línea de tiempo de rendimiento mejorará la experiencia del cliente, especialmente para los usuarios móviles.
• Medir el tiempo de ejecución de JavaScript: Use los tipos de entrada `mark` y `measure` para medir el tiempo que tardan en ejecutarse funciones específicas de JavaScript. Identifique funciones de ejecución lenta y optimícelas utilizando algoritmos más eficientes, almacenando en caché los resultados o aplazando la ejecución para más adelante.
• Detectar tareas largas (Long Tasks): Use el tipo de entrada `longtask` para identificar tareas que bloquean el hilo principal durante un período prolongado. Divida estas tareas en fragmentos más pequeños o muévalas a un hilo en segundo plano para evitar saltos en la interfaz de usuario (UI jank).
• Monitorear First Contentful Paint (FCP) y Largest Contentful Paint (LCP): Use los tipos de entrada `paint` y `largest-contentful-paint` para monitorear el tiempo que tarda en aparecer el primer contenido y el contenido más grande en la pantalla. Optimice la ruta crítica de renderizado para mejorar estas métricas.
• Analizar el Cumulative Layout Shift (CLS): Use el tipo de entrada `layout-shift` para identificar elementos que están causando cambios de diseño inesperados. Reserve espacio para estos elementos o use la propiedad `transform` para animarlos sin causar cambios de diseño.

Técnicas avanzadas

Una vez que tenga una comprensión sólida de los conceptos básicos de la API Performance Timeline, puede explorar algunas técnicas avanzadas para optimizar aún más el rendimiento de su sitio web:

• Monitoreo de usuarios reales (RUM): Recopile datos de rendimiento de usuarios reales en el campo para obtener una imagen más precisa del rendimiento de su sitio web. Use una herramienta de RUM o implemente su propia solución RUM personalizada utilizando la API Performance Timeline. Estos datos pueden usarse para determinar diferencias de rendimiento regionales. Por ejemplo, un sitio web alojado en EE. UU. podría experimentar tiempos de carga más lentos en Asia debido a la latencia de la red.
• Monitoreo sintético: Use el monitoreo sintético para simular interacciones de usuarios y medir el rendimiento en un entorno controlado. Esto puede ayudarle a identificar problemas de rendimiento antes de que afecten a los usuarios reales.
• Pruebas de rendimiento automatizadas: Integre las pruebas de rendimiento en su canal de integración continua/despliegue continuo (CI/CD) para detectar regresiones de rendimiento automáticamente. Herramientas como Lighthouse CI se pueden utilizar para automatizar este proceso.
• Presupuestos de rendimiento (Performance Budgeting): Establezca presupuestos de rendimiento para métricas clave, como el tiempo de carga de la página, el tamaño de los recursos y el tiempo de ejecución de JavaScript. Use herramientas automatizadas para monitorear estos presupuestos y alertarle cuando se excedan.

Compatibilidad entre navegadores

La API Performance Timeline es ampliamente compatible con los navegadores web modernos, incluidos Chrome, Firefox, Safari y Edge. Sin embargo, puede haber algunas diferencias en la implementación y el comportamiento de la API entre los diferentes navegadores.

Para garantizar la compatibilidad entre navegadores, es importante probar su código en diferentes navegadores y usar la detección de características para degradar la funcionalidad con elegancia si la API no es compatible. Bibliotecas como `modernizr` pueden ayudar con la detección de características.

Mejores prácticas

Aquí hay algunas mejores prácticas para usar la API Performance Timeline:

• Use Performance Observers para el monitoreo en tiempo real: Los Performance Observers proporcionan una forma más eficiente de recopilar datos de rendimiento que sondear repetidamente la línea de tiempo.
• Tenga en cuenta el impacto en el rendimiento de la recopilación de datos de rendimiento: Recopilar demasiados datos puede afectar negativamente el rendimiento de su sitio web. Recopile solo los datos que necesita y evite realizar operaciones costosas en la función de devolución de llamada del Performance Observer.
• Use nombres significativos para las marcas y medidas: Esto facilitará el análisis de los datos y la identificación de cuellos de botella de rendimiento.
• Pruebe su código en diferentes navegadores: Asegure la compatibilidad entre navegadores probando su código en diferentes navegadores y utilizando la detección de características.
• Combine con otras técnicas de optimización: La API Performance Timeline ayuda a medir e identificar problemas. Úsela junto con las mejores prácticas establecidas de optimización web (optimización de imágenes, minificación, uso de CDN) para obtener mejoras de rendimiento holísticas.

Conclusión

La API Performance Timeline es una herramienta poderosa para medir y analizar el rendimiento de los sitios web. Al comprender los conceptos e interfaces clave de la API, puede recopilar métricas de rendimiento valiosas y usarlas para identificar cuellos de botella de rendimiento e implementar optimizaciones. Al centrarse en las Web Vitals e implementar técnicas avanzadas como RUM y pruebas de rendimiento automatizadas, puede ofrecer una experiencia de usuario más rápida, fluida y agradable. Adoptar la API Performance Timeline e integrar el análisis de rendimiento en su flujo de trabajo de desarrollo conducirá a mejoras significativas en el rendimiento de su sitio web y la satisfacción del usuario en el entorno web actual, impulsado por el rendimiento.